<template>
    <div class="result iconfont">
        <div v-if="success" class="success big-padding">
            <div class="success-icon"></div>
            <div class="title">{{message}} , 欢迎加入</div>  
            <div class="sm-padding">
                <button type="button" class="btn btn-primary"
                @click="toLoginPannel"
                >立即登录</button>    
            </div>          
        </div>     
        <div v-if="failure" class="success">
            {{message}}            
        </div>     
    </div>
</template>

<script>
export default {
    props:['message'],
    inject:['thisOfToast'],
    data() {
        return {
            success: false,
            failure: false,   
        }
    },
    methods:{
        resetStatus(){
            this.success = false;
            this.failure = false;
            
        },
        toLoginPannel(){
            let that = this.thisOfToast();
            this.resetStatus();
            that.type = "login";
            that.titlename="登录";
            
        }
    },
    watch:{
        message:{
            handler:  function( newval ){
                console.log("message: ", newval);
                if( newval == "注册成功" ){ this.success = true; return ; }
                if( newval == "注册失败" ){ this.success = true; return ;}
                return ;
            },
            immediate: true
        }
        
    }
}
</script>

<style lang="scss">

.title{
    font-weight: bold;
}

.success-icon::after{
    content: "\e61e";
    font-size: 5em;
    color: #00FF00;
}

.big-padding{
    padding: 2em 0;
}

.sm-padding{
    padding: 1em;
}
</style>